import React, { useMemo, useEffect, useState, useRef } from 'react';
import classNames from 'classnames';
// import Skeleton from '../Skeleton';
import Utils from '../Utils';

//removeIf(!production)
import './index.less';
//endRemoveIf(!production)

type IImg = {
  /**
   * @description  图片路径，可传多语言图片
   * @default
   */
  src: string | object;
  /**
   * @description  自定义兜底图
   * @default
   */
  seatImg?: React.ReactNode;
  /**
   * @description  webp图片路径
   * @default true
   */
  webp?: boolean;
  /**
   * @description  class
   * @default
   */
  className?: string;
  /**
   * @description  图片样式
   * @default
   */
  style?: object;
  /**
   * @description  兜底图样式
   * @default
   */
  seatStyle?: object;
  /**
   * @description  兜底图class
   * @default
   */
  seatClassName?: string;
  /**
   * @description  是否使用骨架，默认不使用
   * @default
   */
  isSkeleton?: boolean;
  /**
   * @description  骨架宽度，可使用px rem % vw 等单位
   * @default 100%
   */
  skeWidth?: number | string;
  /**
   * @description  骨架高度
   * @default
   */
  skeHeight?: number | string;
  /**
   * @description  当前语言
   * @default   zh-CN
   */
  language?: string;
  /**
   * @description  头像改为使用oss裁剪参数 传 2x 或  1x
   * @default 1x
   */
  xOssProcess?: string;
  /**
   * @description  点击事件
   * @default
   */
  onClick?: () => void;
};

const Img = ({
  src = '',
  className = '',
  style = {},
  webp = true,
  seatImg,
  seatStyle = {},
  seatClassName = '',
  isSkeleton = false,
  skeWidth = '100%',
  skeHeight = '100%',
  language = 'zh-CN',
  xOssProcess = '1x',
  onClick = () => {},
  ...props
}: IImg) => {
  const defaultSrc =
    '';

  const checkImgSuffix = (img: string): boolean => {
    if (!img || typeof img !== 'string') return false;
    return (
      img.toLocaleLowerCase().includes('.png') ||
      img.toLocaleLowerCase().includes('.jpg') ||
      img.toLocaleLowerCase().includes('.jpeg')
    );
  };

  const getTempSrc = (): string => {
    let tempSrc = '';
    if (!src) {
      // @ts-ignore
      tempSrc = defaultSrc;
    } else if (typeof src === 'object' && src !== null) {
      // @ts-ignore
      tempSrc = src[language];
    } else {
      tempSrc = src;
    }

    if (xOssProcess) {
      tempSrc = tempSrc
        ?.split('?')
        .map((item) =>
          item.includes('https://') && checkImgSuffix(item)
            ? `${item}!${xOssProcess}`
            : item,
        )
        .join('?');
    }
    return tempSrc;
  };

  const initUrl = webp
    ? getTempSrc().replace(/\.(jpg|jpeg|png)$/, '.webp')
    : getTempSrc();

  const [url, setUrl] = useState<string | undefined>();

  const onError = () => {
    if (url === initUrl) {
      setUrl(getTempSrc());
    } else {
      setUrl(defaultSrc);
    }
  };

  const imageProps = {
    style,
    onClick,
    src: url,
    className: classNames(className || 'eleimg-img'),
    alt: '',
    onError,
    ...props,
  };

  useEffect(() => {
    setUrl(initUrl);
  }, [language]);

  if (!url) {
    return <></>;
  }

  return <img {...imageProps} />;
};

export default Img;
